<template>
  <el-header style="width: 100%;">
    <div class="nav-list">
      <navigation/>
    </div>
  </el-header>  
  <div class="outer-container">  
    <div class="container">  
      <!-- 左侧导航栏 -->  
      <aside class="sidebar">  
        <ul>  
          <li   
            v-for="(category, index) in Object.keys(categories)"   
            :key="index"   
            :class="{ active: index === activeCategory }"   
            @click="changeCategory(index)">  
            {{ category }}  
          </li>  
        </ul>  
      </aside>  
  
      <!-- 右侧电影内容 -->  
      <section class="content">  
        <div class="movie-list">  
          <div v-for="(movie, index) in activeMovies" :key="index" class="movie-item" @click="goToRecommended(movie.title)">  
            <img :src="movie.cover" :alt="movie.title" />  
            <p>{{ movie.title }}</p>  
          </div>  
        </div>  
      </section>  
    </div>  
  </div>  
</template>  

<script setup>
import { ref, onMounted } from 'vue';
import request from "@/utils/request";
import Navigation from "@/components/navigation.vue";
import router from '@/router/router';
const categories = ref({}); // 初始化为一个对象
const activeCategory = ref(0); // 当前激活的分类索引
const activeMovies = ref([]);  // 当前显示的电影列表

const fetchCategories = async () => {
  const res = await request.get('/sheets/findAll');
  categories.value = res.data.data; // 假设你的数据在 res.data 中
  if (Object.keys(categories.value).length > 0) {
    activeMovies.value = categories.value[Object.keys(categories.value)[0]];
  }
  console.log('---',categories.value);
  
};
const goToRecommended=(title)=>{
  console.log('title---',title);
  localStorage.setItem('title', title); // 更新 localStorage 中的 title
  router.push({ name: 'Recommended', params: { title: title} });
}
const changeCategory = (index) => {
  activeCategory.value = index;
  const categoryKey = Object.keys(categories.value)[index];
  activeMovies.value = categories.value[categoryKey]; // 更新当前类别的电影
};

onMounted(() => {
  fetchCategories();
});
</script>

<style scoped>
/* 设置整个页面的外层容器居中，并设置背景色、内边距等 */  
.outer-container {  
  display: flex;  
  justify-content: center; /* 水平居中 */  
  align-items: center; /* 垂直居中（但通常对于单个子元素不需要，除非有特别需求）*/  
  min-height: 100vh; /* 视口高度 */    
  padding: 20px; /* 内边距 */  
  box-sizing: border-box; /* 包括内边距和边框在内的总宽度 */  
}  
/*导航栏*/
.nav-list {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 60px;
    list-style: none;
    background-color: black;
    z-index: 1000;
  }
/* 内部内容容器，最大宽度为1200px，并且居中 */
.container {
  display: flex;
  max-width: 800px;
  width: 100%;
  background-color: white;
  padding: 20px;
  margin-left: 220px; /* 为右侧内容添加左边距，确保与左侧边栏不重叠 */
  margin-top: -15px;
}


/* 左侧边栏样式 */
.sidebar {
  width: 150px; /* 确保左侧边栏的宽度固定 */
  background-color: #f8f9fa;
  position: fixed; /* 固定左侧边栏 */
  height: 100%; /* 确保边栏占满整个视口高度 */
  margin-left: -200px;
  padding: 20px;
  margin-top: -24px
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin-top: 18px;
}

.sidebar li {
  padding: 10px;
  cursor: pointer;
  color: #333;
}

.sidebar li.active {
  color: #ff5722;
  font-weight: bold;
}

/* 右侧内容区域 */
.content {
  flex: 1;
  display: flex;
  justify-content: center;
  padding-top: 20px; /* 添加顶部内边距，确保内容不贴到顶部 */
}


.movie-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.movie-item {
  text-align: center;
}

.movie-item img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.movie-item p {
  margin-top: 10px;
  font-size: 14px;
  color: #333;
}

/* 响应式设计：确保小屏幕时电影项目调整为两列 */
@media (max-width: 768px) {
  .movie-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 响应式设计：确保超小屏幕时电影项目调整为一列 */
@media (max-width: 480px) {
  .movie-list {
    grid-template-columns: repeat(1, 1fr);
  }
}
</style>

